import React, {Component} from 'react'
import PubSub from 'pubsub-js'

import './index.css'
import queueName from "../../common";

class List extends Component {
    state = {
        users: [],//初始化用户数组
        isFirst: true, //是否为第一次打开页面
        isLoading: false, //是否处于加载中
        err: ''//存放请求相关的错误信息
    }

    componentDidMount() {
        this.token = PubSub.subscribe(queueName, (_, data) => {
            console.log(data)
            this.setState(data)
        })
    }

    componentWillUnmount() {
        PubSub.unsubscribe(this.token)
    }

    render() {
        let {users, isFirst, isLoading, err} = this.state;
        return (
            <div className="row">
                {
                    isFirst ? <h2>欢迎来到德莱联盟</h2> :
                        isLoading ? <h2>Loading</h2> :
                            err ? <h2 style={{color: 'red'}}>{err}</h2> :
                                users.map((user) => {
                                    return (
                                        <div key={user.id} className="card">
                                            <a rel="noreferrer" href={user.html_url} target="_blank">
                                                <img alt={user.login} src={user.avatar_url} style={{width: '100px'}}/>
                                            </a>
                                            <p className="card-text">{user.login}</p>
                                        </div>
                                    )
                                })
                }
            </div>
        );
    }
}

export default List;